<template>
	<view>
		<view class="input-box">
			
			<view class="position">
				<picker mode="selector" @change="bindRegionChange" :value="addressIndex" :range="provinceList">
					<view class="picker">
						{{address}}
					</view>
			  </picker>
				<image src="../../static/index/xiajiantou.png" mode="" class="xiala" mode ="aspectFit" ></image>
			</view>
			<view class="search" @tap="search">
				<image src="../../static/index/sousuo.png" mode="" class="sousuo" mode ="aspectFit"></image>
				请输入关键词找房
			</view>
		</view>
		<swiper class="swiper" autoplay interval="5000" duration="1000" circular previous-margin="100rpx" next-margin="100rpx" :current="currentIndex"
		@change="swierChange">
			<swiper-item v-for="(item,index) in swiper" :key="index">
				<image v-if="item.url" :src="item.url" mode="aspectFit" :class="{active:index==currentIndex}"></image>
			</swiper-item>
		</swiper>
		
		<view class="contain">
			<view class="contain-list">
				<view class="contain-list-item" v-for="item in containList" :key="id" @tap="Tomore">
					<image :src="item.url" mode="aspectFit" class="contain-list-img"></image>
					<view class="contain-list-text">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="banner">
				<view class="banner-item" v-for="item in banner" :key="id" @tap="Tomore">
					<view class="banner-text">
						<view class="banner-title">
							{{item.title}}
						</view>
						<view class="banner-content">
							{{item.content}}
						</view>
					</view>
					<view class="banner-image">
						<image :src="item.url" mode="aspectFit" class="banner-img"></image>
					</view>
					
					
				</view>
			</view>
		</view>
		<view class="zhizu-box" v-for="(item,index) in fangyuan" :key="id">
			<view class="zhizu" >
			<view class="zhizu-title">
				{{item.title}}
			</view>
			<view class="zhizu-content">
				{{item.content}}
			</view>
			<view class="zhizu-list" >
				<navigator class="zhizu-item" v-for="it in item.list" :key="id" :url="'../xiangqing/xiangqing?imgurl='+it.imgurl+'&title='+it.title">
				<image :src="it.imgurl" mode="aspectFit" class="zhizu-item-img"></image>
				<view class="zhizu-item-title">
					{{it.title}}
				</view>
				<view class="zhizu-item-content">
					{{it.content}}
				</view>
				<view class="zhizu-item-price">
					{{it.price}}
				</view>
				<view class="author">
					<image :src="it.authimg" mode="aspectFit" class="zhizu-item-author"></image>
				<view class="author-name">
					{{it.auth}}
				</view>
				</view>
				
			</navigator>
			</view>
			
			
		</view>
		<view class="more" @tap="Tomore">
			<view class="more-title">
				查看更多
			</view>
			<image :src="more" mode=""  class="moreimg"></image>
		</view>
		</view>
		<Shaixuan></Shaixuan>
		
		
	</view>
</template>

<script>
	import QQMapWX from '../../qqmap/qqmap-wx-jssdk.js';
	import config from '../../utils/mapconfig.js';
	import Shaixuan from '../../components/shaixuan'
	export default {
		name:"index",
		components:{
			Shaixuan
		},
		data() {
			return {
				address:'',
				addressIndex:1,
				provinceList:['成都市','重庆市','北京市'],
				currentIndex : 0,
				title: 'Hello',
				swiper:[],
				containList:[],
				fangyuan:[],
				contentText:{
					contentrefresh:'加载中'
				},
				banner:[
					{
						id:0,
						title:"个人转租",
						content:'免中介费',
						url:'cloud://cloud1-9g80uc31db4637bb.636c-cloud1-9g80uc31db4637bb-1308355986/homeapp-index/banner/banner1.png'
					},{
						id:1,
						title:"租友求租",
						content:'求租专区',
						url:'cloud://cloud1-9g80uc31db4637bb.636c-cloud1-9g80uc31db4637bb-1308355986/homeapp-index/banner/banner2.png'
					}
				],
				more:'cloud://cloud1-9g80uc31db4637bb.636c-cloud1-9g80uc31db4637bb-1308355986/homeapp-index/more.png',
				
				shaixuan:[
					{
						id:0,
						url:'cloud://cloud1-9g80uc31db4637bb.636c-cloud1-9g80uc31db4637bb-1308355986/homeapp-index/zhengzu/zheng-list1.png',
						title:'整租·万华公寓·1居室',
						content:'整套 · 38m · 朝南',
						jianjie:[{
							id:0,
							content:'品质公寓'
						},{
							id:1,
							content:'带独卫'
						}],
						price:'2999元/月起'
					}
				]
			}
		},
		onLoad() {
		this.getLocation()//获取城市
		this.getSwiperData()
		this.getContainListData()
		this.getFangyuanData()
		},
		methods: {
			swierChange(e){
				this.currentIndex = e.detail.current
			},
			//搜索
			search(){
				wx.navigateTo({
					url:'../search/search'
				})
			},
			getLocation(){
				const that = this;
				let qqmapsdk;
				qqmapsdk = new QQMapWX({
				  key:config.mapKey
				})
				qqmapsdk.reverseGeocoder({
				  success(e){
					console.log("当前城市：",e.result.address_component.city);
					that.address=e.result.address_component.city;
				  }
				})
			},
			bindRegionChange: function (e) {
			    console.log('picker发送选择改变，携带值为', e.detail.value)
			    this.region=e.detail.value
			},
			getSwiperData(){
				const that = this
				wx.cloud.callFunction({
					name:'getSwiperData',
					success(res) { // 调用成功
					        console.log(res.result)
					        that.swiper = res.result.data
					      },
					      fail(err) {
					        console.log('失败：', err)
					      }
				})
			},
			getContainListData(){
				const that = this
				wx.cloud.callFunction({
					name:'getContainListData',
					success(res) { // 调用成功
					        console.log(res.result)
					        that.containList = res.result.data
					      },
					      fail(err) {
					        console.log('失败：', err)
					      }
				})
			},
			getFangyuanData(){
				const that = this
				wx.showLoading({
				  title: '加载中',
				})
				wx.cloud.callFunction({
					name:'getFangyuanData',
					success(res) { // 调用成功
					        console.log(res.result.data)
					        that.fangyuan = res.result.data
							wx.hideLoading()
					      },
					      fail(err) {
					        console.log('失败：', err)
							wx.hideLoading()
					      }
				})
				
			},
			Tomore(){
				wx.navigateTo({
					url:"../shaixuan/shaixuan"
				})
			}
			
			
		}
		
	}
</script>

<style lang="less" scoped>
*{
	margin: 0;
	padding: 0;
}
.input-box{
	position: fixed;
	top: 0;
	width: 750rpx;
	height: 100rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	z-index: 99;
	background-color: white;
}
picker{
	display: inline-block;
}
.position{
	width: 200rpx;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	
}
.search{
	display: flex;
	padding-left: 20rpx;
	width: 500rpx;
	height: 50rpx;
	border: 1px solid #ccc;
	border-radius: 10rpx;
	color: #ccc;
	align-items: center;
	box-shadow: 0 5rpx 3rpx #eee;
	font-size: 24rpx;
	
}
.xiala {
	
	width:40rpx ;
	height: 25rpx;
	margin-left: 10rpx;
}
.sousuo{
	width: 45rpx;
	height:45rpx;
	
}
.swiper{
	margin-top: 100rpx;
	width: 780rpx;
	height: 480rpx;
	display: flex;
	justify-content: center;
}
.active{
transform: scale(1.2);
transition: all 0.5s ease-in 0s;
z-index: 20;

}

.contain-list{
	display: flex;
	.contain-list-item{
		width: 187.5rpx;
		height: 187.5rpx;
		.contain-list-img{
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin-left: (187.5-100)/2rpx;
		}
		.contain-list-text{
			text-align: center;
		}
	}
}
.banner{
	display: flex;
	justify-content: space-around;
	width: 100%;
	height: 200rpx;
	.banner-item{
		display: flex;
		width: 350rpx;
		height: 200rpx;
		border-bottom: 1rpx solid   #ccc;
		box-shadow: 0 2rpx 5rpx #ccc;
		.banner-text{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			width: 250rpx;
			height: 200rpx;
			.banner-title{
				width: 250rpx;
				height: 100rpx;
				font-size: 40rpx;
				text-align: center;
				line-height: 100rpx;
			}
			.banner-content{
				width: 250rpx;
				height: 100rpx;
				text-align: center;
				line-height: center;
			}
		}
		.banner-image{
			display: flex;
			width: 100rpx;
			height: 200rpx;
			align-items: center;
		}
		.banner-img{
			display: block;
			width: 100rpx;
			height: 100rpx;
		}
	}
}
.zhizu{
	width: 700rpx;
	margin: 50rpx auto;
	.zhizu-title{
		font-size: 50rpx;
		margin-bottom: 20rpx;
	}
	.zhizu-content{
		color: #999;
	}
	.zhizu-list{
		display: flex;
		justify-content: space-between;
		.zhizu-item{
		width: 330rpx;
		.zhizu-item-img{
			width:330rpx;
			height: 250rpx;
		}
		.author{
			display: flex;
			justify-content: flex-start;
			.zhizu-item-author{
				width: 50rpx;
				height: 50rpx;
			}
			
		}
	}
	}
	
}
.zhizu-item-title{
	font-size: 32rpx;
	font-weight: 600;
}
.zhizu-item-content{
	font-size: 28rpx;
	color: #999;
}
.zhizu-item-price{
	font-weight: 600;
	color: red;
}
.more{
	display: flex;
	width: 700rpx;
	height: 80rpx;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	.moreimg{
	width:32rpx;
	height: 32rpx;
}
}
.shaixuan-check{
	display: flex;
	justify-content: space-around;
	.check-item{
	display: flex;
	justify-content: space-between;
	align-items: center;

	
}
}
.shai-list-item{
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 700rpx;
	height: 300rpx;
	margin: 20rpx auto 0;
	border-bottom: 1rpx solid #ccc;
	.shai-list-left{
		display: flex;
		width: 300rpx;
		height: 300rpx;
		justify-content: center;
		align-items: center;
		.shai-list-left-img{
			width: 240rpx;
			height: 240rpx;
		}
	}
}
.jianjie-item{
	padding: 5rpx 10rpx;
	display: inline;
	background-color: skyblue;
	color: white;
	font-size: 28rpx;
	border-radius: 10rpx;
	margin-right: 10rpx;
}

</style>
